<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>傻子鸟</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
	    <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<style>
			.swiper-container{
				width: 400px;
				height:533px;
				margin: 50px auto;
				/* background-color: lightslategray; */
			}
			.swiper-slide{
				text-align: center;
				font-size: 1.25rem;
				background-color: ghostwhite;
				display: flex;
				justify-content: center;
			}
			.swiper-slide>img{
				width: 400px;
				height:533px;
			}
		</style>
	</head>
	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img src="img/aa1.jpg" alt="">
				</div>
				<div class="swiper-slide">
					<img src="img/aa2.jpg" alt="">
				</div>
				<div class="swiper-slide">
					<img src="img/aa3.jpg" alt="">
				</div>
				<div class="swiper-slide">
					<img src="img/aa4.jpg" alt="">
				</div>
				<div class="swiper-slide">
					<img src="img/aa5.jpg" alt="">
				</div>
				<!-- <div class="swiper-slide">
					<img src="images/ha5.jpg" alt="">
				</div> -->
			</div>
			<!-- 空白点 -->
			<div class="swiper-pagination"></div>
			   <!-- 如果需要导航按钮 -->
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>
		<script src="js/swiper.min.js"></script>
		<script type="text/javascript">
			 var swiper = new Swiper('.swiper-container', {
				    loop:true,
					// 如果需要前进后退按钮
					
				    nextButton: '.swiper-button-next',
				    prevButton: '.swiper-button-prev',
			        pagination: '.swiper-pagination',
			        paginationClickable: true,
			        spaceBetween: 30,
					autoplay:2000,
					
			    });
		</script>
	</body>
</html>
